<script setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import ContextMenu from '@imengyu/vue3-context-menu'
import { useLayoutStore } from '../../store/user'
import { useGlobalStore } from '../../store/global'
import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
const store = useLayoutStore()
const globalStore = useGlobalStore()
const { layout } = storeToRefs(store)
const { edit } = storeToRefs(globalStore)
let timer = ref(null)
window.addEventListener('scroll', function () {
  document.body.toggleAttribute('scroll', true)
  timer && clearTimeout(timer)
  timer.value = setTimeout(() => {
    document.body.toggleAttribute('scroll')
  }, 500)
})

function onContextMenu(e, item) {
  ContextMenu.showContextMenu({
    theme: 'flat',
    x: e.x,
    y: e.y,
    items: [
      {
        label: '删除',
        // icon: h('img', {
        //   src: 'https://imengyu.top/assets/images/test/icon.png',
        //   style: {
        //     width: '20px',
        //     height: '20px',
        //   }
        // }),
        onClick: () => {
          store.delGridItem(item)
        }
      }
    ]
  })
}
//.vue-grid-item:not(.vue-grid-placeholder) {
//  border: 1px solid black;
//}
//
//.vue-grid-item .resizing {
//  opacity: 0.9;
//}
//   .vue-grid-layout {
//   background: #eee;
// }
</script>
<template>
  <div class="container">
    <div id="content">
      <grid-layout
        ref="gridlayout"
        v-model:layout="layout"
        :col-num="120"
        :row-height="1"
        :margin="[4, 4]"
        :is-draggable="edit"
        :is-resizable="edit"
        :vertical-compact="true"
        :use-css-transforms="true"
      >
        <grid-item
          v-for="item in layout"
          :key="item.i"
          class="item-del"
          :x="item.x"
          :y="item.y"
          :w="item.w"
          :h="item.h"
          :i="item.i"
          :max-h="item.maxH"
          :min-w="item.minW"
          @contextmenu="
            (e) => {
              if (edit) {
                onContextMenu(e, item)
              }
            }
          "
        >
          <component :is="item['component']" :id="item.key" />
        </grid-item>
      </grid-layout>
    </div>
  </div>
</template>

<style scoped>
.container {
  padding: 12px;
}
.droppable-element {
  width: 150px;
  text-align: center;
  background: #fdd;
  //border: 1px solid black;
  margin: 10px 0;
  padding: 10px;
}

.vue-grid-item .static {
  background: #cce;
}

.vue-grid-item .text {
  font-size: 24px;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 100%;
  width: 100%;
}

.vue-grid-item .no-drag {
  height: 100%;
  width: 100%;
}

.vue-grid-item .minMax {
  font-size: 12px;
}

.vue-grid-item .add {
  cursor: pointer;
}

.layoutJSON {
  background: #ddd;
  border: 1px solid black;
  margin-top: 10px;
  padding: 10px;
}

.layoutJSON {
  background: #ddd;
  border: 1px solid black;
  margin-top: 10px;
  padding: 10px;
}

.columns {
  -moz-columns: 120px;
  -webkit-columns: 120px;
  columns: 120px;
}
</style>
